<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新闻资讯 - 甄成集团</title>
    <link rel="stylesheet" href="css/news.css">
   
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/common.css">

    <!-- 添加字体图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

    <style>
        .news-header {
            background-image: url('images/icons/bg_news.png');
        }
    </style>
</head>
<body>
    <!-- 导航栏组件 -->
    <div id="navbar"></div>

    <!-- 新闻资讯头部 -->
    <section class="news-header header">
        <div class="header-content">
            <div class="page-info">
                <h2>新闻资讯</h2>
                <p>NEWS</p>
                <div class="breadcrumb">
                    <span>您的位置:</span>
                    <a href="index.html">首页</a>
                    <span>/</span>
                    <span>新闻资讯</span>
                </div>
            </div>
        </div>
    </section>

    <!-- 新闻列表 -->
    <section class="news-list-section">
        <div class="news-grid">
            <!-- 新闻项 1 -->
            <a href="news-detail.html?id=1" class="news-item">
                <div class="news-image">
                    <img src="/images/icons/news-cards.png" alt="新闻图片"  onerror="this.onerror=null;this.src='images/placeholder.png';">
                </div>
                <div class="news-content">
                    <h3>上市即超飞，今晚部今矿高级到上天了！</h3>
                    <p>今矿上天了!自2月以来，业内就流传着今麦郎将推出高端矿泉水今矿的消息。但谁也没想到，今矿的首次亮相会如此惊艳...</p>
                    <div class="news-footer">
                        <span class="read-more">MORE ></span>
                    </div>
                </div>
            </a>

            <!-- 新闻项 2 -->
            <a href="news-detail.html?id=2" class="news-item">
                <div class="news-image">
                    <img src="/images/icons/news-cards.png" alt="新闻图片"  onerror="this.onerror=null;this.src='images/placeholder.png';">
                </div>
                <div class="news-content">
                    <h3>上市即超飞，今晚部今矿高级到上天了！</h3>
                    <p>今矿上天了!自2月以来，业内就流传着今麦郎将推出高端矿泉水今矿的消息。但谁也没想到，今矿的首次亮相会如此惊艳...</p>
                    <div class="news-footer">
                        <span class="read-more">MORE ></span>
                    </div>
                </div>
            </a>

            <!-- 新闻项 3 -->
            <a href="news-detail.html?id=3" class="news-item">
                <div class="news-image">
                    <img src="/images/icons/news-cards.png" alt="新闻图片"  onerror="this.onerror=null;this.src='images/placeholder.png';">
                </div>
                <div class="news-content">
                    <h3>上市即超飞，今晚部今矿高级到上天了！</h3>
                    <p>今矿上天了!自2月以来，业内就流传着今麦郎将推出高端矿泉水今矿的消息。但谁也没想到，今矿的首次亮相会如此惊艳...</p>
                    <div class="news-footer">
                        <span class="read-more">MORE ></span>
                    </div>
                </div>
            </a>

            <!-- 新闻项 4 -->
            <a href="news-detail.html?id=4" class="news-item">
                <div class="news-image">
                    <img src="/images/icons/news-cards.png" alt="新闻图片"  onerror="this.onerror=null;this.src='images/placeholder.png';">
                </div>
                <div class="news-content">
                    <h3>上市即超飞，今晚部今矿高级到上天了！</h3>
                    <p>今矿上天了!自2月以来，业内就流传着今麦郎将推出高端矿泉水今矿的消息。但谁也没想到，今矿的首次亮相会如此惊艳...</p>
                    <div class="news-footer">
                        <span class="read-more">MORE ></span>
                    </div>
                </div>
            </a>

            <!-- 新闻项 5 -->
            <a href="news-detail.html?id=5" class="news-item">
                <div class="news-image">
                    <img src="/images/icons/news-cards.png" alt="新闻图片"  onerror="this.onerror=null;this.src='images/placeholder.png';">
                </div>
                <div class="news-content">
                    <h3>上市即超飞，今晚部今矿高级到上天了！</h3>
                    <p>今矿上天了!自2月以来，业内就流传着今麦郎将推出高端矿泉水今矿的消息。但谁也没想到，今矿的首次亮相会如此惊艳...</p>
                    <div class="news-footer">
                        <span class="read-more">MORE ></span>
                    </div>
                </div>
            </a>

            <!-- 新闻项 6 -->
            <a href="news-detail.html?id=6" class="news-item">
                <div class="news-image">
                    <img src="/images/icons/news-cards.png" alt="新闻图片"  onerror="this.onerror=null;this.src='images/placeholder.png';">
                </div>
                <div class="news-content">
                    <h3>上市即超飞，今晚部今矿高级到上天了！</h3>
                    <p>今矿上天了!自2月以来，业内就流传着今麦郎将推出高端矿泉水今矿的消息。但谁也没想到，今矿的首次亮相会如此惊艳...</p>
                    <div class="news-footer">
                        <span class="read-more">MORE ></span>
                    </div>
                </div>
            </a>
        </div>

        <!-- 分页 -->
        <div class="pagination">
            <a href="#" class="prev"><img src="/images/icons/prev.png" alt="Previous" onerror="this.onerror=null;this.src='images/placeholder.png';"></a>
            <a href="#" class="active">1</a>
            <a href="#">2</a>
            <a href="#">3</a>
            <a href="#">4</a>
            <a href="#">5</a>
            <a href="#">6</a>
            <a href="#" class="next"><img src="/images/icons/next.png" alt="Next" onerror="this.onerror=null;this.src='images/placeholder.png';"></a>
        </div>
    </section>



    <!-- 页脚组件 -->
    <div id="footer"></div>

    <script src="js/loadComponents.js"></script>
</body>
</html> 